<!--  -->
<template>
  <div class=''>
    <!-- 体验DEMO -->
    <section v-if="experience" class="experience">
      <div class="text">{{ experience.text }}</div>
      <el-button v-waves class="useBtn" type="danger" @click="linkTo(experience.button.href)">{{ experience.button.name }}</el-button>
    </section>
  </div>
 </template>

 <script>
import { ALI_API } from '@/utils'
 export default {
  data() {
    return {
      experience:null
    }
  },
  mounted() {
    this.fetchData()
  },
  methods:{
    async fetchData(){
      const response = await fetch(`${ALI_API}/kyb_office/experience.json`)
      this.experience = await response.json()
    },
    linkTo(href){
      if(href){
        if(href.startsWith('http')){
          window.open(href)
        }else{
          this.$router.push(href);
        }
      }
    },
  }
 }
 </script>
 <style lang='scss' scoped>

.experience{
  height: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: url('@/assets/images/demo.png') no-repeat center #F67C36;
  .text{
    color: #fff;
    font-size: 32px;
    font-weight: 600;
  }
  .useBtn{
    margin-top: 35px;
    border-radius: 4px;
    border: 2px solid #fff;
    color: #fff;
    padding: 16px 74px;
    font-size: 18px;
    height: 56px;
    background-color: #F67C36;
    width: 238px;
  }
}
 </style>
